<template>
    <div class="teamplate-SmallTicket">
        <div class="container-fluid">
            <div class="row h-query">
                <form class="form-inline">
                    <div class="biaoti">打印任意一张小票</div>
                    <div class="form-group" style="margin-left:50px;">
                        <label class="">流水号</label>
                        <input type="text" class="form-control memberName input-group-sm" v-model="lshh"  placeholder="请输入流水号">
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-default" @click="equery">查询</button>
                    </div>
                    <div class="form-group pull-right">
                        <button type="button" class="btn btn-default" @click="onBackIndex">ESC退出</button>
                    </div>
                </form>
            </div>
            <div class="row">
                <div class="list-table">
                    <div class="table-wrap">
                        <div class="table-box">
                            <table class="table table-striped tc ">
                                <tbody >
                                    <tr>
                                        <th style="text-align:left;">流水号</th>
                                        <th style="text-align:left;">销售员</th>
                                        <th style="text-align:left;">时间</th>
                                        <th style="text-align:right;">应收金额</th>
                                        <th style="text-align:right;">实收金额</th>
                                        <th style="text-align:right;">找零</th>
                                        <th>操作</th>
                                    </tr>
                                    <tr v-for="(item,index) in list">
                                        <td style="text-align:left;">{{item.lshh}}</td>
                                        <td style="text-align:left;">{{item.shky}}</td>
                                        <td style="text-align:left;">{{item.jzrq}} {{item.ontime}}</td>
                                        <td style="text-align:right;">{{item.ysje}}</td>
                                        <td style="text-align:right;">{{item.sshje}}</td>
                                        <td style="text-align:right;">{{item.zhaol}}</td>
                                        <td ><button style="padding:0px;" class="table-btn" @click="onPrint" :data-lshh="item.lshh">打印</button></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="pager-box clearfix pt15">
                            <div class="pull-left">共计
                                <span class="blue">{{count}}</span>条信息 
                                </div>
                                <div class="pull-right">
                                    <div id="pagenav" class="tcdPageCode"></div>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="lodop-box" id="lodopBxo1" style="position: fixed;left:-300px;visibility:hidden;">
                <div class="title" style="line-height:1.2;font-size:12px;text-align:center">【棉棉生活馆-收银凭条】</div>
                <div>
                    <p style="line-height:1.2;font-size:12px;overflow:hidden;white-space: nowrap;margin:0;height:14px;"><span>日期:{{printData.ma.jzrq}}</span><span>时间:{{printData.ma.ontime}}</span></p>
                    <p style="line-height:1.2;font-size:12px;overflow:hidden;white-space: nowrap;margin:0;height:14px;"><span style="width:40%;float:left;">收银员:{{printData.ma.shky}}</span><span class="fr" style="width:60%;float:right;">流水号:{{printData.ma.lshh}}</span></p>
                    <p style="line-height:1.2;font-size:12px;overflow:hidden;white-space: nowrap;margin:0;height:14px;"><span style="width:50%;float:left;">会员名:{{printData.huiyuan.kkhname}}</span><span style="width:50%;float:right;">积分:{{printData.huiyuan.jifen}}</span></p>
                </div>
                <hr style="margin:3px;">
                <table>
                    <tr style="text-align: center;">
                        <td width='50%' style="line-height:1.2;font-size:12px;">商品名称</td>
                        <td width='20%' style="line-height:1.2;font-size:12px;">数量</td>
                        <td  width='30%' style="line-height:1.2;font-size:12px;">金额</td>
                    </tr>
                    <tr v-for="(item,index) in printData.mx">
                        <td  width='50%' style="line-height:1.2;font-size:12px;overflow:hidden;white-space: nowrap;">{{item.spmch}}</td>
                        <td style="text-align:right;line-height:1.2;font-size:12px;overflow:hidden;white-space: nowrap;" width='20%'>{{item.shl}}</td>
                        <td width='30%'  style="text-align:right;line-height:1.2;font-size:12px;overflow:hidden;white-space:nowrap;">{{item.ysje}}</td>
                    </tr>
                </table>
                <hr style="margin:3px;">
                <div style="position: relative;white-space: nowrap">
                    <div class='clearfix'>
                        <div style="width:55%;float: left;">
                            <p style="margin:0;line-height:1.2;font-size:12px;overflow:hidden;white-space: nowrap">收款金额:{{printData.ma.shkje}}</p>
                            <p style="margin:0;line-height:1.2;font-size:12px;overflow:hidden;white-space: nowrap">实收金额:{{printData.ma.sshje}}</p>
                        </div>
                        <div style="width:45%;float: left">
                            <p style="margin:0;line-height:1.2;font-size:12px;overflow:hidden;white-space: nowrap">找零金额:{{printData.ma.zhaol}}</p>
                            <p style="margin:0;line-height:1.2;font-size:12px;overflow:hidden;white-space: nowrap">抹零金额:{{printData.ma.moling}}</p>
                        </div>
                    </div>
                    <div class='clearfix'>
                        <p style="margin:0;line-height:1.2;font-size:12px;width:55%;float: left;overflow:hidden;white-space: nowrap">会员优惠:{{printData.ma.discount}}</p>
                        <p style="margin:0;line-height:1.2;font-size:12px;width:45%;float: left;overflow:hidden;white-space: nowrap">收讫：{{printData.je.jsfsmch}}</p>
                    </div>
                </div>
                <p style="margin:0;line-height:1.2;font-size:12px;text-align:center">好袜子！好生活！</p>
                <p style="margin:0;line-height:1.2;font-size:12px;text-align:center">祝您购物愉快！</p>    
                <p style="margin:0;line-height:1.2;font-size:12px;">地址：浦东新区龙阳广场2层</p>
                <hr>
            </div>
            <div class="lodop-box" id="lodopBxo2" style="position: fixed;left:-300px;visibility:hidden;">
                <p style="margin:0;line-height:1;font-size:12px;text-align:center">【汇美医保卖场-收银凭条】</p>
                <div>
                    <p style="line-height:1.2;font-size:12px;overflow:hidden;white-space: nowrap;margin:0;height:14px;"><span>日期:{{printData.ma.jzrq}}</span><span>时间:{{printData.ma.ontime}}</span></p>
                    <p style="line-height:1.2;font-size:12px;overflow:hidden;white-space: nowrap;margin:0;height:14px;"><span style="width:40%;float:left;">收银员:{{printData.ma.shky}}</span><span class="fr" style="width:60%;float:right;">流水号:{{printData.ma.lshh}}</span></p>
                    <p style="line-height:1.2;font-size:12px;overflow:hidden;white-space: nowrap;margin:0;height:14px;"><span style="width:50%;float:left;">会员名:{{printData.huiyuan.kkhname}}</span><span style="width:50%;float:right;">积分:{{printData.huiyuan.jifen}}</span></p>
                </div>
                <hr style="margin:3px;">
                <table width="100%" style="table-layout:fixed">
                    <tbody v-for="(item,index) in printData.mx">
                        <tr><td style="margin:0;line-height:1;font-size:12px;overflow:hidden;white-space: nowrap;" colspan="2">品名:{{item.spmch}}</td></tr>
                        <tr>
                            <td style="margin:0;line-height:1;font-size:12px;overflow:hidden;white-space: nowrap;" width='50%'>售价/会员价{{parseFloat(item.lshj).toFixed(2)}}/{{parseFloat(item.dj).toFixed(2)}}</td>
                            <td style="margin:0;line-height:1;font-size:12px;overflow:hidden;white-space: nowrap;" width='50%'>数量:{{parseFloat(item.shl).toFixed(2)}}</td>
                        </tr>
                        <tr>
                            <td style="margin:0;line-height:1;font-size:12px;overflow:hidden;white-space: nowrap;" width='50%'>小计:{{parseFloat(item.sshje).toFixed(2)}}</td>
                            <td style="margin:0;line-height:1;font-size:12px;overflow:hidden;white-space: nowrap;" width='50%'>规格:{{item.shpgg}}</td>
                        </tr>
                        <tr>
                            <td style="margin:0;line-height:1;font-size:12px;overflow:hidden;white-space: nowrap;" width='50%'>批号:{{item.pihao}}</td>
                            <td style="margin:0;line-height:1;font-size:12px;overflow:hidden;white-space: nowrap;" width='50%'>产地:{{item.shpchd}}</td>
                        </tr>
                    </tbody>
                </table>
                <hr>
                <div style="position: relative;white-space: nowrap">
                    <div class='clearfix'>
                        <div style="width:55%;float: left;">
                            <p style="margin:0;line-height:1.2;font-size:12px;overflow:hidden;white-space: nowrap">收款金额:{{printData.ma.shkje}}</p>
                            <p style="margin:0;line-height:1.2;font-size:12px;overflow:hidden;white-space: nowrap">实收金额:{{printData.ma.sshje}}</p>
                        </div>
                        <div style="width:45%;float: left">
                            <p style="margin:0;line-height:1.2;font-size:12px;overflow:hidden;white-space: nowrap">找零金额:{{printData.ma.zhaol}}</p>
                            <p style="margin:0;line-height:1.2;font-size:12px;overflow:hidden;white-space: nowrap">抹零金额:{{printData.ma.moling}}</p>
                        </div>
                    </div>
                    <div class='clearfix'>
                        <p style="margin:0;line-height:1.2;font-size:12px;width:55%;float: left;overflow:hidden;white-space: nowrap">会员优惠:{{printData.ma.discount}}</p>
                        <p style="margin:0;line-height:1.2;font-size:12px;width:45%;float: left;overflow:hidden;white-space: nowrap">收讫：{{printData.je.jsfsmch}}</p>
                    </div>
                </div>
                <p style="margin:0;line-height:1;font-size:12px;text-align:center">*为运动员慎用、*#为含麻类药品</p>
                <p style="margin:0;line-height:1;font-size:12px;text-align:center">(非质量问题，概不退换)</p>
                <p style="margin:0;line-height:1;font-size:12px;text-align:center">祝您购物愉快！</p>    
                <p style="margin:0;line-height:1;font-size:12px;">地址:浦东新区高桥镇花山路696号</p>
                <p style="margin:0;line-height:1;font-size:12px;">电话:021-58696511</p>
                <hr>
            </div>
        </div>
    </div>
</template>
<script>
    import bus from '../api/eventBus';
    import {
        setUi,
        setpopPerfect
    } from '../vuex/actions'
    import {
        ui,
        popPerfect
    } from '../vuex/getters'
    export default {
        components: {},
        data() {
            return {
                fdbs: '',
                count: '',
                list: {},
                lshh: '',
                printData: {
                    ma: [],
                    mx: [],
                    je: {},
                    huiyuan: {}
                }
            }
        },
        watch: {

        },
        vuex: {
            getters: {
                ui,
                popPerfect,
            },
            actions: {
                setUi,
                setpopPerfect
            }
        },
        methods: {
            equery(e) {
                let me = this;
                let res = {
                    lshh: me.lshh
                };
                me.getUserPageList = function(curr) {
                    me.service.selectDYXPDY(me, res, data => {
                        me.list = [data.data.ma];
                        me.count = data.data.count;
                        laypage({
                            cont: 'pagenav', //容器。值支持id名、原生dom对象，jquery对象,
                            pages: data.data.pagCount, //总页数
                            first: '第一页',
                            last: '最后一页',
                            curr: curr || 1, //当前页
                            jump: function(obj, first) { //触发分页后的回调
                                if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
                                    me.getUserPageList(obj.curr);
                                }
                            }
                        });
                    })
                }
                me.getUserPageList();
            },
            onPrint(e) {
                let me = this;
                let {
                    lshh
                } = e.target.dataset;
                let res = {
                    lshh: lshh
                }
                me.service.selectDYXPDY(me, res, data => {
                    me.printData.ma = data.data.ma;
                    me.printData.mx = data.data.mx;
                    me.printData.je = data.data.je;
                    if (data.data.huiyuan) {
                        me.printData.huiyuan = data.data.huiyuan;
                    } else {
                        me.printData.huiyuan = {};
                        me.printData.huiyuan.kkhname = '无';
                        me.printData.huiyuan.jifen = '';
                    }
                    setTimeout(() => {
                        me.onLodop();
                    }, 0);
                })
            },
            onBackIndex(e) {
                let me = this;
                router.push({
                    path: '/'
                });
                history.go(0);
            },
            onLodop(e) { //打印
                let me = this;
                let LODOP;
                LODOP = getLodop();
                if (LODOP) {
                    let config = JSON.parse(localStorage.getItem("config"));
                    if (config) {
                        LODOP.SET_PRINT_PAGESIZE(3, 1385, 100, "");
                        if (config.format == '普通零售') {
                            LODOP.ADD_PRINT_HTM(0, 0, "100%", "100%", $("#lodopBxo1").html());
                            LODOP.ADD_PRINT_BARCODE($('#lodopBxo1').innerHeight(), 35, 120, 120, "QRCode", me.cfg.QRCode);
                        } else {
                            LODOP.ADD_PRINT_HTM(0, 0, "100%", "100%", $("#lodopBxo2").html());
                            LODOP.ADD_PRINT_BARCODE($('#lodopBxo2').innerHeight(), 35, 120, 120, "QRCode", me.cfg.QRCode);
                        }
                        LODOP.SET_PRINTER_INDEXA(config.drive);
                        LODOP.PRINT(); //PRINT,PREVIEW
                    } else {
                        layer.open({
                            content: '打印机未设置好，请前往系统设置页面设置打印机',
                            yes: function(index, layero) {
                                layer.close(index);
                            }
                        });
                    }
                } else {
                    let localLodop = localStorage.getItem("localLodop");
                    if (!localLodop) {
                        localLodop = localStorage.setItem("localLodop", "未安装打印驱动");
                        layer.alert('未安装打印驱动');
                    }
                    return;
                }
            },
        },
        mounted() {
            let user = JSON.parse(sessionStorage.getItem("user"));
            if (!user) {
                router.push({
                    path: "/login"
                })
                return;
            }
            $(document).keydown(e => {
                let key = e.keyCode;
                if (key == 13) {
                    let me = this
                }
            })
            let me = this;
            me.fdbs = localStorage.getItem("fdbs");
            console.log(me.fdbs, '分店标识');
            let winHeight = $(window).outerHeight();
            if (winHeight <= 768) {
                me.row = 12
            } else if (winHeight <= 800) {
                me.row = 14
            } else if (winHeight <= 863) {
                me.row = 18
            } else {
                me.row = 20
            }

            me.getUserPageList = function(curr) {
                let res = {
                    page: curr || 1,
                    rows: me.row
                }
                me.service.selectDYXP(me, res, data => {
                    me.list = data.data.zs;
                    me.count = data.data.count;
                    laypage({
                        cont: 'pagenav', //容器。值支持id名、原生dom对象，jquery对象,
                        pages: data.data.pagCount, //总页数
                        first: '第一页',
                        last: '最后一页',
                        curr: curr || 1, //当前页
                        jump: function(obj, first) { //触发分页后的回调
                            if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
                                me.getUserPageList(obj.curr);
                            }
                        }
                    });
                })
            }
            me.getUserPageList();

            $(document).keydown(e => {
                let key = e.keyCode;
                if (key == 27) {
                    me.onBackIndex();
                }
            })
        }
    }
</script>